/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/21 8:09 下午
 * @version V1.0
 */
import React from 'react';
import { Card, Row, Col } from 'antd';
import { connect } from 'umi';
import styles from './index.less';

const ProductDetail = ({ ProductDetail: { productDetail } }) => {
    return (
        <Card className={styles.detailContainer}>
            <Row>
                <Col span={8}>
                    <p className={styles.label}>商品名称:</p>
                    <p className={styles.value}>{productDetail.spec_items[0].pname}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>所属店铺:</p>
                    <p className={styles.value}>{productDetail.shop_name}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>商品分类:</p>
                    <p className={styles.value}>{productDetail.category_name}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>商品产地:</p>
                    <p className={styles.value}>{productDetail.origin_place}</p>
                </Col>

                <Col span={8}>
                    <p className={styles.label}>现价:</p>
                    <p className={styles.value}>{productDetail.spec_items[0].price}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>原价:</p>
                    <p className={styles.value}>{productDetail.spec_items[0].original_price}</p>
                </Col>
                <Col span={8}>
                    <p className={styles.label}>库存:</p>
                    <p className={styles.value}>{productDetail.spec_items[0].stock}</p>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <div className={styles.imgWrapper}>
                        <p className={styles.label}>商品图片:</p>
                        <p className={styles.imgContent}>
                            <img className={styles.img} src={productDetail.spec_items[0].thumbnail} alt=""/>
                        </p>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <div className={styles.imgWrapper}>
                        <p className={styles.label}>详情图片:</p>
                        {
                            productDetail.big_images.map((item, index) => {
                                return <p key={index} className={styles.imgContent}>
                                    <img className={styles.img} src={item} alt=""/>
                                </p>;
                            })
                        }
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span={8}>
                    <p className={styles.label}>商品介绍:</p>
                    <div className={styles.intro} dangerouslySetInnerHTML={{__html: productDetail.intro}} />
                </Col>
            </Row>
        </Card>
    );
};

export default connect(({ ProductDetail, dispatch, loading }) => ({
    ProductDetail,
    dispatch,
    loading: loading.effects['ProductDetail/getProductDetail'],
}))(ProductDetail);
